<template>
	<view class="container user-container">
		<view class="user-main" :style="getTopStyle()">
			<view class="user-top">
				<template v-if="!isLogin">
					<image class="user-header" :src="$fileUrl+'head.png'" mode="aspectFill"></image>
					<view class="user-info">
						<view class="top-action" @click="clickLogin">点击登录</view>

					</view>

				</template>
				<template v-else="isLogin">
					<image class="user-header" :src="userInfo.headPortrait" mode="aspectFill" v-if="userInfo.headPortrait">
					</image>
					<image class="user-header" :src="$fileUrl+'head.png'" mode="aspectFill" v-else></image>
					<view class="user-info">
						<view class="top-action" @click="jump('/pages/my/setting')">{{userInfo.nickName|| '暂未设置'}}
						</view>
						<view class="top-phone">{{pageHidePhone(userInfo.phone)}}</view>
					</view>

					<view class="iconfont" @click="jump('/pages/my/setting')">&#xe643;</view>
				</template>
			</view>
			<view class="my-reservation">
				<view class="m-r-title">我的预约</view>
				<view>
					<view class="reservation-list" @click="jump('/pagesUser/reservation/list?type=all')">
						<image class="reservation-img" :src="$fileUrl+'my-g.png'" mode="aspectFill"></image>
						<view class="reservation-title">全部预约</view>
					</view>
					<view class="reservation-list" @click="jump('/pagesUser/reservation/list?type=0')">
						<image class="reservation-img" :src="$fileUrl+'my-y.png'" mode="aspectFill"></image>
						<view class="reservation-title">待确认</view>
					</view>
					<view class="reservation-list" @click="jump('/pagesUser/reservation/list?type=1')">
						<image class="reservation-img" :src="$fileUrl+'my-b.png'" mode="aspectFill"></image>
						<view class="reservation-title">已预约</view>
					</view>
				</view>
			</view>
			<view class="user-action">
				<view class="action-list" @click="jump('/pagesUser/exchange/exchange')">
					<image class="action-img" :src="$fileUrl+'my-1.png'" mode="aspectFill"></image>
					<view class="action-title">签到领积分</view>
				</view>
				<view class="action-list">
					<image class="action-img" :src="$fileUrl+'my-2.png'" mode="aspectFill"></image>
					<button class="action-share" open-type="share">注册邀请领积分</button>
					<view class="action-title">注册邀请领积分</view>
				</view>
				<view class="action-list" @click="jump('/pagesUser/exchangeList/exchangeList')">
					<image class="action-img" :src="$fileUrl+'my-3.png'" mode="aspectFill"></image>
					<view class="action-title">兑换中心</view>
				</view>
				<view class="action-list" @click="jump('/pagesUser/coupon/coupon')">
					<image class="action-img" :src="$fileUrl+'my-4.png'" mode="aspectFill"></image>
					<view class="action-title">福利中心</view>
				</view>
				<view class="action-list" @click="jump('/pagesWorker/worker/index')">
					<image class="action-img" :src="$fileUrl+'my-5.png'" mode="aspectFill"></image>
					<view class="action-title">工作台</view>
				</view>
			</view>
			<view class="about-us">关于我们</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getStorage, hideLoading, hidePhone, setStorage, showLoading } from '@/common/util';
	import commonStore from '@/store/commonStore';
	import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
	import api from '../../common/api';

	const userInfo = ref<any>({})
	const isLogin = ref<boolean>(true)
	onMounted(async () => {
		await getUserInfo()
	})
	onShow(async () => {
		isLogin.value='123'
		
		if (commonStore.state.reload.indexOf('userIndex') >= 0) {
			getUserInfo()
			commonStore.commit('delReload', 'userIndex')
		}
	})
	const getUserInfo = async () => {
		userInfo.value = getStorage('userAuth') || {}
		if (userInfo.value.token) {
			isLogin.value = true
		} else {
			isLogin.value = false
		}
	}

	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const clickLogin = () => {
		uni.navigateTo({ url: '/pages/login/login' })
	}
	const clickOut = () => {
		uni.showModal({
			title: '提示',
			content: '你确定退出登录嘛？',
			confirmText: '立即退出',
			success: (res) => {
				if (res.confirm) {
					setStorage("userAuth", '');
					commonStore.commit('addReload', 'userIndex')
					commonStore.commit('addReload', 'propertyIndex')
					commonStore.commit('addReload', 'index')
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const getTopStyle = () => {
		// #ifdef MP-WEIXIN
		const res = uni.getMenuButtonBoundingClientRect()
		return `padding-top:${res.top}px`
		// #endif
		// #ifdef H5
		return ''
		// #endif
	}
	const pageHidePhone = (str : string) => {
		return hidePhone(str)
	}

	// #ifdef MP-WEIXIN
	//朋友
	onShareAppMessage(() => {
		const userInfo = getStorage('userInfo') || {}
		return {
			title: '邀请你加入',
			path: '/pages/index/index?type=invite&id=' + userInfo.id
		}
	})
	//朋友圈
	onShareTimeline(() => {
		const userInfo = getStorage('userInfo') || {}
		return {
			title: '邀请你加入',
			path: '/pages/index/index?type=invite&id=' + userInfo.id
		}
	});
	// #endif
</script>

<style lang="scss">
	.user-container {
		height: 100%;
		position: relative;
		padding: 24rpx;
		background: linear-gradient(180deg, #DBFFFB 0%, #D9EFFD 20%, #D7E5FF 30%, #F2F3F8 50%, #F2F3F8 100%);

		.user-main {}

		.user-top {
			padding-top: 43rpx;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 42rpx;
			}
		}

		.user-header {
			border: solid 1px #eee;
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			flex-shrink: 0;
		}

		.user-info {
			margin-left: 20rpx;
			flex-grow: 1;
		}

		.top-action {
			color: #202020;
			font-size: 32rpx;
			font-weight: bold;
			flex-grow: 1;

		}

		.top-phone {
			font-weight: bold;
			font-size: 24rpx;
			color: #202020;
			margin-top: 10rpx;
		}

		.my-reservation {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx 30rpx;
			margin-top: 30rpx;

			.m-r-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #202020;
				margin-bottom: 25rpx;
			}

			.reservation-list {
				display: inline-block;
				text-align: center;
				width: 33.33%;
				font-weight: bold;
				font-size: 24rpx;
				color: #383838;
			}

			.reservation-img {
				width: 76rpx;
				height: 76rpx;
				margin-bottom: 10rpx;
			}
		}

		.user-action {
			margin-top: 40rpx;
		}

		.action-list {
			background-color: #fff;
			border-radius: 10rpx;
			display: inline-flex;
			align-items: center;
			padding: 20rpx;
			width: 48.5%;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #31312E;
			position: relative;

		}

		.action-list:nth-child(2n) {
			margin-left: 3%;
		}

		.action-img {
			width: 84rpx;
			height: 84rpx;
		}

		.action-share {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 120rpx;
			opacity: 0;
		}

		.about-us {
			font-size: 24rpx;
			color: #3AD3C1;
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}

		.about-us::after,
		.about-us::before {
			display: inline-block;
			content: '';
			width: 250rpx;
			height: 1px;
			border-bottom: solid 1px #DAD9D9;
			flex-grow: 1;
		}

		.about-us::after {
			margin-left: 20rpx;
		}

		.about-us::before {
			margin-right: 20rpx;
		}
	}
</style>